@import 'base';

.integral-exchange-main{

  //*****head*****
  .head{
    //background: url("../../assets/img/bg_integral.png") no-repeat top left;
    background: -webkit-linear-gradient(left, #3D7EFF, #3D7EFF);
    width: 100%;
    height: 143px;
    color: #fff;
    padding:35px 15px 20px;
    box-sizing: border-box;

    .rule-icon{
      top: 15px;
      right:15px;

      i{
        top: 1px;
        left: 0;
      }
    }

    .point{
      font-size: 40px;

      span{
        font-size: 11px;
      }
    }

    .btn{
      margin-top: 8px;

      span{
        width: 90px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #fff;
        border-radius: 16px;
      }

      span:last-child{
        margin-left: 32px;
      }
    }
  }
  //*****head*****

  .title-p{
    width: 100%;
    height: 44px;
    line-height: 44px;

    img{
      width: 33px;
      height: 35px;
      vertical-align: middle;
    }
  }

  //*****任务*****
  .integral-task-box{

    ul{
      width: 100%;
      height:auto;
      padding-bottom: 16px;

      li{
        padding:0 20px;
        box-sizing: border-box;

        img{
          top: 66%;
          left: 20px;
          width: 24px;
          height: 26px;
          transform: translateY(-50%);
        }

        div{
          margin-top: 16px;
          width: 100%;
          padding-left: 30px;
          box-sizing: border-box;

          .caption{

          }

          .pop-text{
            font-size: 11px;
            color: #999AA3;
          }

          .btn-span{
            top:50%;
            right: 0;
            transform: translateY(-50%);
            width: 70px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            font-size: 13px;
            border-radius: 22px;
            background: -webkit-linear-gradient(left,#FAAA8B,#F87676);
          }

          .btn-active{
            background: #E8E8E8 !important;
            color: #999AA3 !important;
          }
        }


      }

    }
  }
  //*****任务*****

  //*****banner*****
  .banner{
    height: 90px;

    img{
      width: 100%;
      height: 90px;
    }
  }
  //*****banner*****

  //*****兑换商品列表*****
  .produc-list{

    .list{
      height:auto;

    }
  }
  //*****兑换商品列表*****
}
